<template>
  <div class="view-wrapper">
    <div class="listBox">
      <div class="title">活动周期</div>
      <el-tabs v-model="activeName" style="margin-bottom:20px" @tab-click="activeChange">
        <el-tab-pane :label="item.label" :name="item.id" v-for="(item,index) in dateList" :key="index"></el-tab-pane>
      </el-tabs>
      <div class="title">活动数据</div>
      <el-table v-loading="loadingOne" :data="tableListOne" stripe border>
        <el-table-column label="当前分红周期" align="center" prop="label" />
        <el-table-column label="参与店铺数量" align="center" prop="shopNum" />
        <el-table-column label="订单量" align="center" prop="orderNum" />
        <el-table-column label="订单总金额" align="center" prop="orderMoney" />
        <el-table-column label="累加规则" align="center" prop="addUpType" />
        <el-table-column label="分红池金额" align="center" prop="bonusMoney" />
        <el-table-column label="参与人数" align="center" prop="customerNum" />
      </el-table>
      <el-tabs v-model="activeNav" style="margin:20px 0" @tab-click="navChange">
        <el-tab-pane label="分红池累加明细" name="1"></el-tab-pane>
        <el-tab-pane label="参与用户" name="2"></el-tab-pane>
      </el-tabs>
      <template v-if="activeNav=='1'">
        <el-table v-loading="loading" :data="tableListOrder" stripe border>
          <el-table-column label="序号" type="index" width="55" align="center" fixed />
          <el-table-column label="交易单号" align="center" prop="orderNo" />
          <el-table-column label="交易时间" align="center" prop="transactionTime" />
          <el-table-column label="发行店铺" align="center" prop="shopName" />
          <el-table-column label="发行方" align="center" prop="issuerName" />
          <el-table-column label="卡名称" align="center" prop="cardName" />
          <el-table-column label="卡编号" align="center" prop="cardNo" />
          <el-table-column label="实付金额（￥）" align="center" prop="payMoney" />
          <el-table-column label="累加金额" align="center" prop="addUpMoney" />
        </el-table>
        <pagination v-show="totalOrder>0" :total="totalOrder" :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize" @pagination="getCycleOrderLs" />
      </template>
      <template v-if="activeNav=='2'">
        <el-table v-loading="loadingCustomer" :data="tableListCustomer" stripe border>
          <el-table-column label="序号" type="index" width="55" align="center" fixed />
          <el-table-column label="姓名/昵称" align="center" prop="customerName" />
          <el-table-column label="手机号" align="center" prop="phone" />
          <el-table-column label="周期内消费金额" align="center" prop="orderMoney" />
          <el-table-column label="财富值" align="center" prop="wealth" />
          <el-table-column label="预计分红" align="center" prop="bonusMoney" />
          <el-table-column label="分红状态" align="center" prop="status"></el-table-column>
        </el-table>
        <pagination v-show="totalCustomer>0" :total="totalCustomer" :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize" @pagination="getCustomerLs" />
      </template>
    </div>
  </div>

</template>

<script>
  import {
    poolCycleLs,
    poolCycleCount,
    cycleOrderLs,
    cycleCustomerLs
  } from '@/api/consumeMiningManagement/dividendPools'
  export default {
    name: "",
    components: {

    },
    data() {
      return {
        loading: false,
        id: '', //
        loadingOne: false,
        dateList: [], //周期列表
        weekId: '', //分红周期id
        tableListOne: [{
          label: '', //当前分红周期
          shopNum: '', //参与店铺数量
          orderNum: '', //订单量
          orderMoney: '', //订单总金额
          addUpType: '', //累加规则
          bonusMoney: '', //分红池金额
          customerNum: '', //参与人数
        }], //分红池周期活动数据
        activeName: '',
        activeNav: '1',
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          cycleId: '', //分红周期id
        },
        tableListOrder: [], //分红池累加明细订单
        totalOrder: 0, //分红池累加明细订单总数
        loadingCustomer: false,
        tableListCustomer: [], //参与用户
        totalCustomer: 0, //参与用户总数
      };
    },
    computed: {
      ExportParams() {
        const params = {
          ...this.queryParams,
        };
        return params;
      },
    },
    created() {
      this.id = this.$route.query.id;
      this.getPoolCycleLs()
    },
    methods: {
      // 查询分红池周期标签列表
      getPoolCycleLs() {
        poolCycleLs(this.id).then(res => {
          this.dateList = res.result
          if (this.dateList.length > 0) {
            this.activeName = this.dateList[0].id
            this.weekId = this.dateList[0].id
            this.getPoolCycleCount()
            this.getCycleOrderLs()
            this.getCustomerLs()
          }
        })
      },
      //查询分红池周期活动数据
      getPoolCycleCount() {
        this.loadingOne = true
        poolCycleCount(this.weekId).then(res => {
          this.tableListOne[0].label = res.result.label
          this.tableListOne[0].shopNum = res.result.shopNum
          this.tableListOne[0].orderNum = res.result.orderNum
          this.tableListOne[0].orderMoney = res.result.orderMoney
          this.tableListOne[0].addUpType = res.result.addUpType
          this.tableListOne[0].bonusMoney = res.result.bonusMoney
          this.tableListOne[0].customerNum = res.result.customerNum
          this.loadingOne = false
        }).catch(() => {
          this.loadingOne = false
        })
      },
      //活动周期选择
      activeChange(e) {
        this.weekId = e.name
        this.queryParams.pageNum = 1
        this.getPoolCycleCount()
        this.getCycleOrderLs()
        this.getCustomerLs()
      },
      //类型选择
      navChange(e) {
        console.log(e.name)
      },
      //查询分红池累加明细订单
      getCycleOrderLs() {
        this.queryParams.cycleId = this.weekId
        this.loading = true;
        cycleOrderLs(this.queryParams).then(response => {
          this.totalOrder = response.result.total
          this.tableListOrder = response.result.records
          this.loading = false;
        }).catch(() => {
          this.loading = false;
        })
      },
      //查询分红池参与用户
      getCustomerLs() {
        this.queryParams.cycleId = this.weekId
        this.loadingCustomer = true;
        cycleCustomerLs(this.queryParams).then(response => {
          this.tableListCustomer = response.result.total
          this.tableListCustomer = response.result.records
          this.loadingCustomer = false;
        }).catch(() => {
          this.loadingCustomer = false;
        })
      },
    }
  };

</script>
<style lang="scss" scoped>
  .listBox {
    box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
    background-color: #fff;
    border-radius: 8px;
    padding: 20px 20px;
    margin-top: 10px;
  }

  .title {
    font-size: 20px;
    color: #333;
    margin-bottom: 20px;
  }

</style>
